@import 'woocommerce/components/text-control/style.scss';

.signup-form .signup-form__input {
	margin-bottom: 20px;
	transition: none;

	&.is-error,
	&[type='password'] {
		margin-bottom: 0;
	}

	&[name='username'] {
		/*!rtl:ignore*/
		direction: ltr;
	}
}

.signup-form__terms-of-service-link {
	font-size: 12px;
	margin: 0 0 20px;
	text-align: center;

	a {
		@include breakpoint( '>480px' ) {
			white-space: pre;
		}
	}
}

.signup-form__social {
	max-width: 400px;
	margin: 0 auto;
	padding: 16px;
	box-sizing: border-box;

	p {
		font-size: 13px;
		color: var( --color-text-inverted );
		margin: 0 0 12px;
		text-align: center;

		&:last-child {
			margin: 10px 0 0;
		}
	}
}

.signup-form__social-buttons {
	button {
		display: block;
		margin: 0 auto 15px;
		box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, 0.14 ), 0 2px 1px -1px rgba( 0, 0, 0, 0.12 ),
			0 1px 3px 0 rgba( 0, 0, 0, 0.2 );
	}
}

.signup-form__social-buttons-tos a {
	color: var( --color-text-inverted );
	text-decoration: underline;
}

.signup-form__passwordless-form-wrapper {
	.signup-form__terms-of-service-link {
		margin: 4px 0;
	}

	.logged-out-form__footer {
		margin-top: 0;
	}

	.validation-fieldset__validation-message {
		min-height: auto;
	}
}

.signup-form__recaptcha-tos {
	display: none;
	padding: 20px 10px 10px;
	font-size: 13px;
	color: var( --studio-blue-5 );
	text-align: center;

	p {
		margin: 0;
		padding-top: 9px;
	}

	a {
		color: var( --studio-blue-5 );
		text-decoration: underline;
	}
}

// Replace recaptcha badge with ToS text and space
// everything out a little more.
@media ( max-width: 660px ) {
	.signup-form__recaptcha-tos {
		display: block;
	}

	.grecaptcha-badge {
		visibility: hidden;
	}

	.signup-form.is-showing-recaptcha-tos {
		.signup-form__social {
			padding-bottom: 28px;
		}

		.logged-out-form__links::before {
			margin-bottom: 16px;
		}
	}
}
